import { Alert, Tabs } from '@aws-amplify/ui-react';
import { CURRENT_MAJOR_VERSIONS } from '@/data/frameworks';

export const latestVersion = CURRENT_MAJOR_VERSIONS['react-native'];
export const amplify5UIVersion = 1;

<Tabs.Container defaultValue={latestVersion}>
  <Tabs.List>
    <Tabs.Item value={latestVersion}>`@aws-amplify/ui-react-native` v{latestVersion} (latest)</Tabs.Item>
    <Tabs.Item value={amplify5UIVersion}>`@aws-amplify/ui-react-native` v{amplify5UIVersion}</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value={latestVersion}>
    ```jsx{6,23} expoSnack file=../../../../../../../../examples/react-native/src/features/Authenticator/OverrideServices/Example.tsx

    ```
  </Tabs.Panel>
    <Tabs.Panel value={amplify5UIVersion}>
      <Alert role="none" variation="warning" heading="Sign Up Auto Sign In">
        When overriding `signUp` in `@aws-amplify/ui-react-native` **version {amplify5UIVersion}**, you must include the `autoSignIn` key and set `enabled` to true, as shown in the example below.
      </Alert>
      ```jsx{4,19,24}
        import React from 'react';
        import { Button } from 'react-native';
        import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
        import { Amplify, Auth } from 'aws-amplify';

        function SignOutButton() {
          const { signOut } = useAuthenticator();
          return <Button title="Sign Out" onPress={signOut} />;
        }

        const services = {
          async handleSignUp(input) {
            let { username, password, attributes } = input;
            // custom username
            username = username.toLowerCase();
            attributes.email = attributes.email.toLowerCase();
            return Auth.signUp({
              username,
              password,
              attributes,
              autoSignIn: {
                enabled: true,
              },
            });
          },
        };

        function App() {
          return (
            <Authenticator.Provider>
              <Authenticator services={services} >
                <SignOutButton />
              </Authenticator>
            </Authenticator.Provider>
          );
        }

        export default App;
    ```
  </Tabs.Panel>
</Tabs.Container>